<template>
	<view>
		<navbar title="查看物流" />
		<!-- <view class="header flex mallDetails-content">
			<view class="logo flex align-item_center justify-content_center">
				<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/3.png" />
			</view>
			<view class="info">
				<view class="status">派送中</view>
				<view class="company">物流公司</view>
				<view class="time">预计今天到达</view>
			</view>
		</view> -->

		<!-- <view class="employee flex align-item_center justify-content_space-between v-details-card border-box">
			<view class="left flex align-item_center justify-content_center flex align-item_center">
				<image class="block user-avatar" src="https://mall-admin.xinjiafu.net/mini-static/images/user/4.png" />
				<view class="info">
					<view class="status">快递员配送中</view>
					<view class="user flex align-item_center">
						<view class="name">张三</view>
						<view class="show flex align-item_center">
							<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/6.png" />
							<view>5.0分</view>
						</view>
					</view>
				</view>
			</view>
			<image class="block right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/5.png" />
		</view> -->

		<view class="details v-details-card border-box">
			<view class="details-header flex align-item_center">
				<view class="logo flex align-item_center justify-content_center">
					快递
					<!-- <image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/3.png" /> -->
				</view>
				<view class="name">
					{{orderDetail.logisticsName}} {{orderDetail.logisticsNo}}
				</view>
			</view>
			<view class="steps">
				<up-steps direction="column" dot activeColor="#A72530">
					<up-steps-item v-for="(item,index) in expressDelivery" :key="index" :title="item.content"
						:desc="dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')">
					</up-steps-item>
				</up-steps>
			</view>

		</view>

		<u-gap height="100rpx"></u-gap>
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import OrderApi from "@/sheep/api/trade/order.js"
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	import dayjs from "dayjs"

	const expressDelivery = ref([]);
	const getOrderExpressTrackList = () => {
		OrderApi.getOrderExpressTrackList(orderId.value).then(res => {
			expressDelivery.value = res.data;
		})
	}

	const orderDetail = reactive({
		logisticsName: "",
		logisticsNo: ""
	})
	const getOrder = () => {
		OrderApi.getOrder(orderId.value).then(res => {
			orderDetail.logisticsName = res.data.logisticsName
			orderDetail.logisticsNo = res.data.logisticsNo
		})
	}

	const orderId = ref();
	onLoad((option) => {
		orderId.value = option.id
		getOrderExpressTrackList()
		getOrder()
	})
</script>


<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.details {
		margin: 20rpx auto 0;
		padding: 34rpx 16rpx;

		.steps {
			margin-top: 40rpx;

			:deep(.u-steps-item__wrapper) {
				background-color: #EDE2CD;
			}
		}

		&-header {
			.name {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(64, 3, 3, 1);
				margin-left: 20rpx;
			}

			.logo {
				width: 48rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 50%;


				line-height: 110rpx;
				font-size: 18rpx;
				font-weight: 400;
				white-space: nowrap;


				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.employee {
		margin: 54rpx auto 0;
		padding: 20rpx 36rpx 20rpx 22rpx;

		.right {
			width: 44rpx;
			height: 44rpx;
		}

		.left {
			.info {
				.user {
					margin-top: 4rpx;

					.show {
						view {
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(64, 3, 3, 1);
							margin-left: 10rpx;
						}

						image {
							margin-left: 40rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}

					.name {
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 34.76rpx;
						color: rgba(64, 3, 3, 1);
					}
				}

				.status {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(64, 3, 3, 1);
				}
			}

			.user-avatar {
				width: 68rpx;
				height: 68rpx;
				margin-right: 14rpx;
			}
		}
	}

	.header {
		padding: 38rpx 50rpx 0;

		.info {
			.time {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(64, 3, 3, 1);
				margin-top: 4rpx;
			}

			.company {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(64, 3, 3, 1);
				margin-top: 4rpx;
			}

			.status {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
			}
		}

		.logo {
			margin-right: 34rpx;
			width: 110rpx;
			height: 110rpx;
			opacity: 1;
			border-radius: 4rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;


			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>